<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text" name="user" /><span></span>
    <script>
        document.querySelector("[name='user']").addEventListener('keyup', (e) => {
            // 输入内容是字母数字下划线3到6位
            let flag = e.target.value.match(/^\w{3,6}$/);
            document.querySelector('span').innerHTML = flag ? '通过' : '不通过'
            flag ? e.target.style.border = '2px solid green' :
                e.target.style.border = '2px solid red';
        })
        // 元字符
        // /d 匹配数字 +匹配一个或多个 g全局匹配 匹配到结束
        let str = "zhsnga 2021";
        console.log(str.match(/\d+/g)); // ["2021"]

        let str1 = `
            张三：010-9999999，李思：020-88888888
        `
        // 匹配上面字符串并去掉空白 [^\d\-:：，,\s]+ 匹配除了数字-：，空白的都要
        console.log(str1.match(/[^\d\-:：，,\s]+/g)) // ["张三", "李思"]
        console.log(str1.match(/\d{3}\-\d{7,8}/g)) // ["010-9999999", "020-88888888"]

        let str2 = " ad m min - www ";
        // 去掉空白
        console.log(str2.match(/[^\s]+/g).join("")) // admmin-www
        // 邮箱
        //  \w 字母数字下划线 \W 除了字母数字下划线
        let email = 'admin123@gmail.com';
        console.log(email.match(/^\w+@\w+\.\w+$/g)); // ["admin123@gmail.com"]

        // 以字母开始 字母数字下划线结束 不区分大小写 5到10位
        // [a-z] a到z之间的任意一个字母  i 不区分大小写
        // . 除了换行符的任意一个字符
        let username = prompt('请输入正确的用户名');
        let valid = /^[a-z]\w{4,9}/i.test(username);
        if (valid) {
            console.log('用户名正确')
        } else {
            console.log('用户名不合法')
        }
        // 模式 s 视为单行匹配
    </script>
</body>

</html>